<script setup ts>
import { reactive, ref } from 'vue';
import { useGetDictTypeApi, useSubmitApplicationApi, useGetOrderApplyInfoApi } from "@/apis/order"
import { onLoad } from '@dcloudio/uni-app'
	
const form = reactive({
	id: undefined,
	typeId: "",
	typeName: "",
	loadingAddress: "",
	unloadingAddress: "",
	cargoName: "",
	cargoTypeId: "",
	cargoGrossWeight: "",
	insurance: "",
	insuranceSn: ""
})
const formRef = ref()
const rules = {
	typeName: {require: true, message: "必须填写订单类型", trigger: ['change','blur']},
	loadingAddress: {require: true, message: "必须起点", trigger: ['change','blur']},
	unloadingAddress: {require: true, message: "必须填写终点", trigger: ['change','blur']},
	cargoName: {require: true, message: "必须填写货物名称", trigger: ['change','blur']},
	cargoTypeId: {require: true, message: "必须填写货物分类", trigger: ['change','blur']},
	cargoGrossWeight: {require: true, message: "必须填写货物毛重", trigger: ['change','blur']}
}

const orderTypeEnable = ref(false)
const orderTypeColumns = ref([])

onLoad((e)=>{
	init()
	if(e.id) useGetOrderApplyInfoApi(e.id).then(res =>{
		for (const k in form) {
			form[k] = res[k]
		}	
	})

})

function init(){
	useGetDictTypeApi().then(res =>{
		orderTypeColumns.value = res.dataList
	})
}

function orderConfirm(e){
	form.typeName = e.value[0].dictLabel
	form.typeId = e.value[0].dictValue
	orderTypeEnable.value = false
}

function submit(){
	formRef.value.validate().then(res => {
		useSubmitApplicationApi(form).then(res =>{
			uni.$u.toast("申请成功")
		})
	})
	
}
</script>

<template>
<view style="padding: 10px 20px">
	<u-form :model="form" ref="formRef" :rules="rules">
		<u-form-item 
			prop="typeName"
			label="订单类型" 
			@click="orderTypeEnable = true" 
			:required="true" 
			label-width="100"
			borderBottom
		>
			<u-input v-model="form.typeName" border="none" placeholder="订单类型"/>
		</u-form-item>
		<u-form-item prop="loadingAddress" label="起点" :required="true" label-width="100" borderBottom>
			<u-input v-model="form.loadingAddress" border="none" placeholder="订单类型"/>
		</u-form-item>
		<u-form-item prop="unloadingAddress" label="终点" :required="true" label-width="100" borderBottom>
			<u-input v-model="form.unloadingAddress" border="none" placeholder="订单类型"/>
		</u-form-item>
		<u-form-item prop="cargoName" label="货物名称" :required="true" label-width="100" borderBottom>
			<u-input v-model="form.cargoName" border="none" placeholder="货物名称"/>
		</u-form-item>
		<u-form-item prop="cargoTypeId" label="货物分类" :required="true" label-width="100" borderBottom>
			<u-input v-model="form.cargoTypeId" border="none" placeholder="货物分类"/>
		</u-form-item>
		<u-form-item prop="cargoGrossWeight" label="货物毛重" :required="true" label-width="100" borderBottom>
			<u-input v-model="form.cargoGrossWeight" border="none" placeholder="货物毛重"/>
		</u-form-item>
		<u-form-item prop="insurance" label="保险公司" label-width="100" borderBottom>
			<u-input v-model="form.insurance" border="none" placeholder="保险公司"/>
		</u-form-item>
		<u-form-item prop="insuranceSn" label="保险单号" label-width="100" borderBottom>
			<u-input v-model="form.insuranceSn" border="none" placeholder="保险单号"/>
		</u-form-item>
	</u-form>
	<u-picker :show="orderTypeEnable" :columns="[orderTypeColumns]" keyName="dictLabel" @confirm="orderConfirm" closeOnClickOverlay />
	<u-button type="primary" shape="circle" text="提交" @click="submit" :customStyle="{width: '50%', 'margin-top': '20px'}"/>
</view>
</template>

<style>
</style>